<template>
  <div class="detail-box"> 
    <div class="song-title">
      <h1 style="font-size: 28px;">{{ songName }}</h1>
      <h3>
        歌手：{{ singerName }} 专辑：{{ albumName }}
      </h3>
    </div>
    
    <div class="comments">
      <el-input v-model="commentInput" type="textarea" style="width: 400px"
      maxlength="60" :rows="3"
      placeholder="到点了，开始emo"
      show-word-limit/>
      <div class="buttons">
        <el-button @click="submit" type="primary"> SUBMIT </el-button>
        <el-button @click="clear"> CLEAR </el-button>
        <!-- <el-button @click="refreshComments"> GetComments </el-button> -->
      </div>
      
      <div v-for="item in userComments" :key="item">
        <p> {{ item.nickname }} : {{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'comments',
  props: {
    albumName : { type: String },
    singerName : { type: String },
    songName : { type: String },
    currentUserId: { type: Number },
    currentSongId: { type: Number },
  },
  data() {
    return {
      commentInput: '',
      userComments: [],
    }
  },
  methods: {
    clear() {
      this.commentInput = ''
    },
    submit() {
      console.log(this.currentUserId)
      console.log('Submitted!')
      var _self = this
      axios({
        method: 'post',
        url: '/api/postAComment',
        params: {
          songid: this.currentSongId,
          userid: this.currentUserId,
          content: this.commentInput
        }
      }).then((res) => {
        console.log(res.data)
        _self.clear()
        _self.refreshComments()
      })
    },
    refreshComments() {
      var _this = this
      axios({
        method: 'post',
        url: '/api/getCommentsBySongId',
        params: {
          'songid': this.currentSongId
        }
      }).then((res) => {
        console.log(res.data.data)
        _this.userComments = res.data.data
      })
    },
  },
  mounted() {
    axios({
      method: 'post',
      url: '/api/getCommentsBySongId',
      params: {
        'songid': this.currentSongId
      }
    }).then((res) => {
      console.log(res.data.data)
      this.$nextTick(() => {
        this.userComments = res.data.data
      })
    })
  }
}
</script>

<style scoped>
.detail-box {
  height: 92%;
  width: 80%;
  padding: 5px 20px 5px 20px;
  overflow: scroll;
  box-shadow: var(--el-box-shadow);
}

.comments {
  width: 100%;
  height: 75%;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
}

.song-title {
  height: 25%;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.buttons {
  margin-top: 20px;
}
</style>